<template>
	<el-card shadow="never">
		<template #header>
            {{ title }}
            <el-tag type="primary" class="float-right">总</el-tag>
		</template>
        <p class="number"><SvgIcon name="ele-DataLine" class="align-middle mr-2" size="32" /><span>{{ number }}</span></p>
	</el-card>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const props = defineProps({
	title: {
		type: String,
		default: '文章访问量',
	},
	data: {
		type: Object,
		default: () => ({}),
	},
});

const number = ref(props.data?.article_hits||0);
</script>

<style lang="scss" scoped>
.number {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size: 32px;
    font-weight: 400;
    color: #333;
    line-height: 40px;
}
</style>
